<template>
    <div>
        <classHeader></classHeader>
        <div class="all">
            <div class="classTab">
                <div @click="tab1Cli()" class="tab tabOne">
                    <text class="clasNames">{{firstClass}}</text>
                    <image style="width:29px;height:16px;margin-left:20px;" src="../../../web/img/shop_store_nearby_graycontinue.png"></image>
                </div>
                <div @click="tab2Cli()" class="tab tabTwo">
                    <text class="pathName">{{first1Path}}</text>
                    <image style="width:29px;height:16px;margin-left:20px;" src="../../../web/img/shop_store_nearby_graycontinue.png"></image>
                </div>
                <div class="tab tabThree">离我最近</div>
            </div>
            <div class="allTab">
                <list  v-show="tab1"  class="oneTabs">
                    <div class="allTabTitle">
                        <text>全部类型</text>
                        <text>1110</text>
                    </div>
                    <cell @click="classWrite($event)" v-for="i in classTab">
                        <text class="thatShopName">{{i.name}}</text>
                        <text>{{i.num}}</text>
                    </cell>
                </list>
                <div v-show="tab2" class="twoTabs">
                    <list class="firstPath">
                        <cell @click="path1Write($event)" class="firstPathName" v-for="i in firstPath">
                            <text class="thatPath1Name">{{i.name}}</text>
                            <text>{{i.num}}</text>
                        </cell>
                    </list>
                    <list class="secondPath">
                        <cell class="secondPathName" v-for="i in secondPath">
                            <text>{{i.name}}</text>
                            <text>{{i.num}}</text>
                        </cell>
                    </list>
                </div>
            </div>
        </div>
        <classShop></classShop>
        <div v-show="fog" class="fog"></div>
    </div>
</template>

<script>
    import classHeader from "../src/components/classification/classHeader"
    import classShop from "../src/components/classification/classShop"

    export default {
        name: "classification",
        components:{
            classHeader,
            classShop,
        },
        data(){
            return{
                classTab:[
                    {
                        name:"托马斯旗舰店",
                        num:"1523"
                    },
                    {
                        name:"兰博基尼专卖店",
                        num:"1231"
                    },
                    {
                        name:"法拉利专修店",
                        num:"13"
                    },
                    {
                        name:"奔驰售后服务点",
                        num:"23"
                    },
                    {
                        name:"洗车店",
                        num:"1135"
                    }
                ],
                firstPath:[
                    {
                        name:"长安区",
                        num:"55"
                    },
                    {
                        name:"长安区",
                        num:"55"
                    },
                    {
                        name:"长安区",
                        num:"55"
                    },
                    {
                        name:"长安区",
                        num:"55"
                    },
                    {
                        name:"长安区",
                        num:"55"
                    },
                ],
                secondPath:[
                    {
                        name:"莫干山路",
                        num:"10"
                    },
                    {
                        name:"莫干山路",
                        num:"10"
                    },
                    {
                        name:"莫干山路",
                        num:"10"
                    },                    {
                        name:"莫干山路",
                        num:"10"
                    },
                    {
                        name:"莫干山路",
                        num:"10"
                    },
                    {
                        name:"莫干山路",
                        num:"10"
                    },

                ],
                tab1:false,
                tab2:false,
                fog:false,
                firstClass:"洗洗车",
                first1Path:"雁塔区",
            }
        },
        methods:{
            // 类型选择显隐
            tab1Cli(){
                if(this.tab1===true){
                    this.tab1=false;
                    this.fog=false;
                }else if(this.tab2===false){
                    this.tab1=true;
                    this.fog=true;
                }
            },
            // 地址选择显隐
            tab2Cli(){
                if(this.tab2===true){
                    this.tab2=false;
                    this.fog=false;
                }else if(this.tab1===false){
                    this.tab2=true;
                    this.fog=true;
                }
            },
            // 类型列表选择点击赋值选项卡
            classWrite(e){
                console.log(e.target.className)
                if(e.target.className==="thatShopName weex-el weex-text"){
                    console.log(e.target.innerHTML);
                    this.firstClass=e.target.innerHTML;
                    this.tab1=false;
                    this.fog=false;
                }
            },
            // 一级地址页面点击选择赋值选项卡
            path1Write(e){
                if(e.target.className==="thatPath1Name weex-el weex-text"){
                    console.log(e.target.innerHTML);
                    this.first1Path=e.target.innerHTML;
                }
            }

        },


    }
</script>

<style scoped>
.all{
    background: white;
}
    .fog{
        width:100%;
        height:80%;
        position: fixed;
        left:0;
        top:20%;
        background: #000;
        opacity: .6;
        z-index:10;
    }
    .firstPath{
        border-left:none!important;
    }
    .firstPathName{
        padding-right:32px;
    }
    .secondPathName{
        padding-left:18px;
    }
    .twoTabs main section p{
        line-height: 68px;
        font-size: 28px;
    }
    .twoTabs main section{
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .twoTabs main{
        flex:1;
        height:100%;
        border-left:1px solid #bbb;
    }
    .twoTabs{
        flex-direction: row;
        justify-content: space-around;
        padding:18px 0;
    }
    .allTab{
        padding:0 28px;
        border-radius: 15px;
        position:absolute;
        background: #fff;
        left:0;
        width: 100%;
        top:90px;
        box-shadow: 2px 2px 5px #ddd,-2px -2px 5px #ddd;
        z-index:11;
    }
    .allTabTitle{
        margin:22px 0;
        flex-direction: row;
        justify-content: space-between;
    }
    .allTabTitle p{
        font-size: 30px;
        color:#666;
        font-weight: 600;
    }
    .oneTabs{

    }
    .oneTabs section p{
        line-height: 72px;
        font-size: 28px;
    }
    .oneTabs section{
        flex-direction: row;
        justify-content: space-between;
    }
    .classTab{
        flex-direction: row;
        align-items: center;
        justify-content: center;
        margin-top:40px;
        /*box-shadow: 0 2px 5px #ddd;*/
        padding-bottom: 10px;
    }
    .tab{
        flex:1;
    }
    .tabOne{
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }
    .tabTwo{
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }
    .tabThree{
        font-size:30px;
        text-align: center;
    }
    .clasNames{
        font-size: 30px;
    }
    .pathName{
        font-size: 30px;
    }
</style>